<template>
<div class="car-card" @click='jump'>

    <i-row>

        <i-col :sm='24' :span='8' >
            <div class="car-img">
                <div class="img-box">
                    <img :src="info.imgUrl" :alt="info.model">
                </div>
            </div>
        </i-col>

        <i-col :sm='24' :span='16' >
            <div class="car-info">

                <div class="car-info-item">

                    <div class="car-model">
                        {{info.model}}
                    </div>
                    
                    <div class="car-tips">
                        {{carTip}}
                    </div>
                    
                </div>

                <div class="car-info-item">
                    <div class="car-title">
                        {{info.title}}
                    </div>
                </div>

                <div class="car-info-item">

                    <div class="car-plateNum" :class='info.plateNum && "hs" '>
                        {{info.plateNum ? '有牌费': '无牌费' }}
                    </div>

                    <div class="car-price">
                      HKD {{info.price}}
                    </div>
                    
                </div>

                <div class="car-info-item">

                    <div class="car-type-tips">

                        <div class="type-tip" v-for='(item, index) of info.typeTips' :key='index'>
                            {{item}}
                        </div>
                        
                    </div>

                    <div class="car-address">
                        <i class="iconfont icon-location"></i>
                        {{info.address}}
                    </div>

                    <i class="iconfont phone icon-phone"></i>
                    
                </div>
                

            </div>
        </i-col>
        



    </i-row>
    
  
</div>
</template>

<script lang='ts'>
import {Component, Vue, Prop} from 'vue-property-decorator';

export interface ICarCard{
    
    id: string
    model: string
    title: string
    plateNum: boolean
    price: number
    imgUrl: string
    typeTips: Array<string>
    address: string
    carTips: Array<string> 
}

@Component
export default class CarCard extends Vue{

    @Prop()
    info?: ICarCard

    get carTip(){
        let end = '';
        
        if(this.info && this.info.carTips){
            end = this.info.carTips.reduce((pre, next) =>{
                return `${pre} | ${next}`
            })
        }
        return  end;
    }

     jump(){

        if(!this.info){
            return;
        }
        let id:string = this.info.id;
        this.$router.push({
            path: '/car-detaild',
            query: {id}
        })

    }
    
}


</script>

<style scoped lang='less'>

.car-card{
    overflow: hidden;
    
    padding-bottom: 14*@rem;
    border: 1*@rem solid @color_8;
    background: @bgColor;
    
    .radius-df();
    .car-img{
        height: 160*@rem;
    }
    
}

.car-info{
    padding: 0 10*@rem;
}

.car-info-item{
    .textOverFlow();
    display: flex;
    justify-content: space-between;
    align-items: center;    
    margin-top: 10*@rem;

}

.car-model{
    color: @mainColor;
}

.car-address,
.car-type-tips{
    font-size: @fontSizeSm;
}

.car-type-tips{

    .type-tip{
        display: inline-block;
        .tipIcon-main();
    }
    
}


.car-price{
    font-size: @fontSizeMd;
    font-weight: 600;
    color: @priceColor;
}
.car-plateNum{
    color: @mainColor;

    &.hs{
        color: @priceColor;
    }
}

.phone{
    display: inline-block;
    @size: 22*@rem;
    flex: 0 0 @size;
    width: @size;
    height: @size;
    border-radius: 100%;
    background: @successColor; 
    text-align: center;
    line-height: @size;
    color: @fontColorLight;
}


/* 768 */
@media (max-width: 768px){

    .car-card{
        padding-bottom: 0;
        .car-img{
            height: 140*@rem;
        }
    }
    
}


</style>